<template>
	<div class="flex flex-col">
		<div class="text-sm">【数据传递信息】</div>
		<div ref="echartsContainerRef" class="flex-1"></div>
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	import useSetOption from '@/hooks/useSetOption';
	import { useVisualizationStore } from '@/stores/visualizationStore';

	const echartsContainerRef = ref(null);
	const visualizationStore = useVisualizationStore();

	useSetOption({
		// Echart容器
		refTarget: echartsContainerRef,
		// Echarts渲染配置项
		renderOptions: () => {
			const relations = visualizationStore.data.relationData.relations;

			// 存储每个节点的value属性, 在绘制路线图时使用
			const nodesValueDict = {};

			// 修改后端返回来的坐标值
			relations.forEach((relationItem) => {
				// 将最下面的两个节点, y坐标修改成0
				if ([2, 3].includes(relationItem.id)) {
					relationItem.value[1] = 0;
				}

				// 修改数据中心坐标, 让它水平垂直居中
				if (relationItem.id === 0) {
					relationItem.value[1] = 160;
				}

				// 存储每个节点的value属性, 绘制路线图时使用
				nodesValueDict[relationItem.name] = relationItem.value;
			});

			return {
				xAxis: { show: false },
				yAxis: { show: false },
				grid: { left: 35, right: 35, top: 35, bottom: 35 },
				series: [
					{
						type: 'graph',
						// 层级
						z: 3,
						// 不使用布局, 使用节点中的 x|y 坐标, 也就是 dataItem.value 属性
						layout: 'none',
						// 该系列使用的坐标系
						coordinateSystem: 'cartesian2d',
						// 节点标签
						label: { show: true, position: 'bottom', color: '#fff' },
						// 数据
						data: relations.map((item) => {
							// 数据中心.id = 0;
							return { name: item.name, value: item.value, symbolSize: item.id !== 0 ? 30 : 80 };
						}),
						// 关系
						links: relations.map((item) => {
							return {
								// 源点
								source: item.source,
								// 目标点
								target: item.target,
								// 自定义属性: 速率
								speed: item.speed,
								// 线的样式
								lineStyle: {
									curveness: 0.2,
									// curveness: [2, 3].includes(item.id) ? -0.2 : 0.2,
									type: 'dashed',
								},
								label: {
									show: true,
									color: '#fff',
									offset: item.name.includes('子级') ? [15, 0] : [0, 0],
									formatter: (params) => `${params.data.speed}kb/s`,
								},
							};
						}),
					},
					{
						// 用于绘制线路特效
						type: 'lines',
						// 层级
						z: 1,
						// 使用坐标轴的方式配置线路方向
						coordinateSystem: 'cartesian2d',
						// 线特效的配置
						effect: {
							show: true,
							symbol: 'arrow',
							symbolSize: 10,
						},
						// 配置线的样式
						lineStyle: {
							curveness: 0.2,
						},
						// 数据
						data: relations.map((relationsItem) => {
							// 如果是数据中心, 则不显示
							if (relationsItem.id === 0)
								return {
									coords: [
										[0, 0],
										[0, 0],
									],
								};

							return {
								coords: [
									nodesValueDict[relationsItem.source], // 起点
									nodesValueDict[relationsItem.target], // 起点
								],
							};
						}),
					},
				],
			};
		},
	});
</script>

<style scoped></style>
